<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/assets/css/layui.css">
    <style>
        body{
            margin: 0;
            padding: 0;
        }

        .layui-tab-content{
            font-size: 40px;
        }

        .layui-tab-title{
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 10%;
        }

        .layui-tab-title li{
            height: 200%;
            margin: 0;
            padding: 7%;
        }
        .layui-tab-title li i{
            margin-bottom: 20%;
        }

        .layui-icon{
            font-size: 500%;
            margin-top: 50%;
        }

        .headImg img{
            height: 250px;
            width: 250px;
            float:left;
            border-radius: 50%;
            border: 3px solid #eee;
            overflow: hidden;
        }

        .headImg{
            height: 40%;
            display:flex;
            align-items: center;
            justify-content:center;

        }
        .layui-form-pane{
            margin-top: 100px;
        }

        .layui-form-pane .layui-input-block{
            height: 60px;
            margin-left: 180px;
        }
        .layui-form-pane .layui-input-block input{
            height: 60px
        }

        .layui-form-pane .layui-form-label{
            line-height: 49px;
            width: 180px;
        }

        .layui-btn-fluid{
            height: 60px;
            margin-top: 20px;
            font-size: 40px;
        }
        .layui-btn-container{
            margin-top: 100px;
        }

        table span{
            font-size: 20px;
        }
        #announce li *{
            /*font-size: 40px;*/
        }

        #announce img{
            width: 400px;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="layui-tab layui-tab-card" lay-filter="docDemoTabBrief">
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="header">公告</div>
            <div>
                <ul class="layui-timeline" id="announce">

                </ul>
            </div>

        </div>

        <div class="layui-tab-item">

            <div class="header">出入记录</div>

            <table id="accessInfo" lay-filter="accessInfo"></table>

        </div>

        <div class="layui-tab-item ">

            <div class="header">我的信息</div>

            <div class="layui-anim layui-anim-up headImg" data-anim="layui-anim-up">
                <img src="../../assets/images/car.jpg">
            </div>
            <form class="layui-form layui-form-pane" lay-filter="ownerInfo" action="">
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">电话</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" lay-verify="required" autocomplete="off" class="layui-input" disabled>
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">车位号</label>
                    <div class="layui-input-block">
                        <input type="text" name="parkNum" lay-verify="required" autocomplete="off" class="layui-input" disabled>
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">余额</label>
                    <div class="layui-input-block">
                        <input type="text" name="balance" lay-verify="required" autocomplete="off" class="layui-input" disabled>
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">车牌号</label>
                    <div class="layui-input-block">
                        <input type="text" name="carNum" lay-verify="required" autocomplete="off" class="layui-input" disabled>
                    </div>
                </div>
            </form>

            <div class="layui-btn-container">
                <button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

                <button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
            </div>


        </div>
    </div>

    <ul class="layui-tab-title">
        <li class="layui-this layui-col-xs4">
            <i class="layui-icon layui-icon-chat"></i>
        </li>
        <li class="layui-col-xs4">
            <i class="layui-icon layui-icon-date"></i>
        </li>
        <li class="layui-col-xs4">
            <i class="layui-icon layui-icon-user"></i>
        </li>
    </ul>
</div>
</body>
</html>
<script type="text/html" id="barDemo">
    <a class="layui-btn  layui-btn-xs" lay-event="edit">查看详情</a>
</script>
<script src="/static/assets/layui.js"></script>
<script src="/static/assets/jquery.min.js"></script>
<script>
    $(function () {
        if (sessionStorage.getItem("owner") != null) {
            //注意：导航 依赖 element 模块，否则无法进行功能性操作
            layui.use(['element', 'form', 'table'], function () {
                var element = layui.element,
                    form = layui.form,
                    table = layui.table;
                
                $.ajax({
                    url: '/announcement/showAllRelease',
                    type: 'post',
                    dataType: 'json',
                    success: function (res) {
                        console.log(res.data)
                        var announce = res.data.Announcements
                        for(var i=0; i<announce.length;i++){
                            $('#announce').append('<li class="layui-timeline-item">\n' +
                                '    <i style="font-size: 10px; margin-top: 0" class="layui-icon layui-timeline-axis">&#xe63f;</i>\n' +
                                '    <div class="layui-timeline-content layui-text">\n' +
                                '      <h3 class="layui-timeline-title">'+announce[i].releaseTime+'</h3>\n' +
                                '      <p><span>' + announce[i].title +'</span>'+
                                '        <br><span>' + announce[i].content +'</span>'+
                                '        <br><img src="http://'+announce[i].imgs+'">' +
                                '      </p>\n' +
                                '    </div>\n' +
                                '  </li>')
                        }
                        $('#announce').append('<li class="layui-timeline-item">\n' +
                            '    <i style="font-size: 10px; margin-top: 0" class="layui-icon layui-timeline-axis">&#xe63f;</i>\n' +
                            '    <div class="layui-timeline-content layui-text">\n' +
                            '      <div class="layui-timeline-title">过去</div>\n' +
                            '    </div>\n' +
                            '  </li>')
                    },
                    error: function (err) {
                        
                    }
                })

                var ownerId = sessionStorage.getItem("ownerId")
                var ownerName = sessionStorage.getItem("ownerName")
                var ownerTel = sessionStorage.getItem("ownerTel")
                console.log(ownerId)
                $.ajax({
                    url: '/ICCard/selectICCardByOwnerId',
                    type: 'post',
                    headers:{'Content-Type':'application/json;charset=utf8'},
                    data: JSON.stringify(
                        {
                            ownerId: ownerId
                        }
                    ),
                    dataType: 'json',
                    success: function (res) {
                        console.log(res.data.iCcard)
                        var ICcard = res.data.iCcard
                        var carNum = ICcard.carNum
                        table.render({
                            elem: '#accessInfo'
                            , url: '/accessInfo/selectAllByCarNum'
                            , method: 'post'
                            , where: {
                                carNum: carNum
                            }
                            , cols: [[
                                {field: 'accessId', title: 'ID', sort: true, width: '25%', style: 'font-size:20px'}
                                , {field: 'inDate', title: '入场时间', width: '25%', style: 'font-size:20px'}
                                , {field: 'outDate', title: '出场时间', width: '25%', style: 'font-size:20px'}
                                , {fixed: 'right', title: '操作', toolbar: '#barDemo', style: 'font-size:20px'}
                            ]]
                            , response: {
                                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                            }
                            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                                return {
                                    "code": res.code, //解析接口状态
                                    "msg": res.message, //解析提示文本
                                    "count": res.count, //解析数据长度
                                    "data": res.data.accessInfos//解析数据列表
                                };
                            }
                            , page: true //开启分页
                            , id: "accessInfo"
                        });
                        form.val("ownerInfo", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                            "username": ownerName // "name": "value"
                            ,"phone": ownerTel
                            ,"parkNum": ICcard.parkPlaceNum
                            ,"balance": ICcard.balance
                            ,"carNum": ICcard.carNum
                        });
                    },
                    error: function (err) {
                        console.log(err)
                    }
                })


                table.on('tool(accessInfo)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'edit') {
                        //页面
                        layer.open({
                            type: 2,
                            title: '详情页',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['70%', '25%'],
                            content: '/desk/appEject?accessId=' + data.accessId //iframe的url
                        });
                    }
                });
            });

        }else {
            console.log("没有权限")
            location.href = "http://127.0.0.1:8080/desk/ownerLogin"
        }
    })
</script>